<template>
  <div class="MyFollow-contain">
    <div class="MyFollow-body">
      <el-card v-if="myFollowList.length != 0">
        <el-table :data="myFollowList">
          <el-table-column prop="avatar" width="80">
            <template slot-scope="scope">
              <img :src="scope.row.avatar" class="avatar-img">
            </template>
          </el-table-column>
          <el-table-column prop="nickname"></el-table-column>
          <el-table-column fixed="right" width="200">
            <template slot-scope="scope">
              <el-button @click="FollowButton(scope.row)" type="text" size="small">{{ scope.row.followed ? '关注' : '取消关注'
                }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 空区域 -->
      <div class="empty-contain">
        <span v-if="myFollowList.length == 0 && (params.searchContent == ''||params.searchContent == null)">
          <el-empty description="您还没有关注的作者..."></el-empty>
        </span>
        <span v-if="myFollowList.length == 0 && !(params.searchContent == ''||params.searchContent == null)"style="display: flex;justify-content: center">
          <p style="padding-right: 100px;color: #ccc;">未找到对应文章</p>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { getMyFollowListAPI, addMyFollowAPI, deleteMyFollowAPI } from '@/api/myFollow'
export default {
  data() {
    return {
      myFollowList: [],
      params: {
        searchContent: '',
      },
    }
  },
  mounted() {
    this.params.searchContent = this.$route.query.searchContent
    this.getMyFollowList();
  },
  methods: {
    FollowButton(row) {
      if (row.followed) {
        addMyFollowAPI(row.authorID)
        this.$set(row, 'followed', false);
      } else {
        deleteMyFollowAPI(row.authorID)
        this.$set(row, 'followed', true);
      }
    },
    async getMyFollowList() {
      const res = await getMyFollowListAPI(this.params);
      if (res.code == 200) {
        this.myFollowList = res.data.rows
      }
    },
    AuthorDetail(id) {
      console.log(id)
    },

  }
}
</script>

<style>
.MyFollow-contain {

  .MyFollow-body {
    /* display: flex; */
    justify-content: center;
  }

  .el-card {
    width: 70%;


    .avatar-img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }

    .el-button {
      width: 70px;
      border-radius: 25px;
      border: 1px solid #409EFF;
    }

    .el-card__body,
    .el-main {
      padding: 10px !important;
    }

    .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
      padding-bottom: 0;
    }

    .el-divider--horizontal {
      display: block;
      height: 1px;
      width: 100%;
      margin: 0;
    }
  }

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
</style>
